<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>By 裴鸿宇</title>
<style type="text/css">
body {
    margin:0px;
}
.top-area{
	margin-top:10px;
	width:990px;
	height:40px;
	border:1px solid #D3D3D3;
	background-color:#00FFFF;
}
/*--------*/
.main-area{
	margin-top:20px;
	width:990px;
	height:500px;
	border:1px solid #D3D3D3;
}

.search_friend{
	width:900px;
	height:120px;
	text-align:left;
	margin-top:30px;
	border:1px solid #D3D3D3;
}
.requirement{
	margin-top:10px;
	height:60px;
	line-height:60px;
	text-align:left;
}
.font_size{
	font-size:15px;
}
.search_button{
	margin-top:15px;
	width:860px;
	text-align:right;
}
.button_color{
	cursor:pointer;
	width:60px;
	height:25px;
	font-size:15px;
	color:#0066FF;
}

.friend_recommend{
	width:900px;
	height:300px;
	text-align:left;
	margin-top:30px;
	border:1px solid #D3D3D3;
}
.change{
	width:785px;
	text-align:right;
	margin-left:50px;
	font-size:13px;
}
.friend_list{
	width:800px;
	height:220px;
	margin-top:3px;
	margin-left:50px;
	border:1px solid #D3D3D3;
}
.friend_face1{
	float:left;
	overflow:hidden;
	margin-top:25px;
	margin-left:25px;
	width:170px;
	height:60px;
}
.friend_face2{
	float:left;
	overflow:hidden;
	margin-top:45px;
	margin-left:25px;
	width:170px;
	height:60px;
}
.face{
	width:60px;
	height:60px;
}
.friend_infor{
	width:80px;
	height:70px;
	font-size:14px;
}
.name{
	margin-left:5px;
	margin-top:7px;
	overflow:hidden;
	height:15px;
}
.button_{
	cursor:pointer;
	background-color:#B0E0E6;
}
/*--------*/
.last-area{
	width:620px;
	height:90px;
	margin-top:20px;
	border:1px solid #D3D3D3;
}
/*--------*/
.left{
	float:left;
}
</style>
</head>
<body>
	<center>
		<div class="top-area"></div>
		
		<div class="main-area">
			<div class="search_friend">
				<div class="requirement">
					<font size="5" color="#FF9933"><b>&nbsp;&nbsp;找朋友：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></font>
					<select class="font_size">
						<option>选择省份</option>
						<option></option>
						<option></option>
					</select>&nbsp;&nbsp;&nbsp;&nbsp;
					<select class="font_size">
						<option>城市/地区</option>
						<option></option>
						<option></option>
					</select>&nbsp;&nbsp;&nbsp;&nbsp;
					<select class="font_size">
						<option>大学</option>
						<option></option>
						<option></option>
					</select>&nbsp;&nbsp;&nbsp;&nbsp;
					<select class="font_size">
						<option>院系</option>
						<option></option>
						<option></option>
					</select>&nbsp;&nbsp;&nbsp;&nbsp;
					<select class="font_size">
						<option>性别</option>
						<option></option>
						<option></option>
					</select>&nbsp;&nbsp;&nbsp;&nbsp;
					<select class="font_size">
						<option>年龄</option>
						<option></option>
						<option></option>
					</select>
				</div>
				<div class="search_button"><input type="submit" value="查&nbsp;找" class="button_color"></div>
			</div>
			
			<div class="friend_recommend">
				<br/><font size="5" color="#00FFCC"><b>&nbsp;&nbsp;好友推荐</b></font><br/>
				<div class="change"><a href="#">换一批</a></div>
				<div class="friend_list">
					<div class="friend_face1">
						<div class="left"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/face/face1.jpg" class="face"></div>
						<div class="left friend_infor">
							<div class="name">酒鬼</div><br/>
							<input type="button" value="+&nbsp;好友" class="button_" title="加TA为好友" onmouseover="this.style.backgroundColor='#AFEEEE'" onmouseout="this.style.backgroundColor='#B0E0E6'">
						</div>
					</div>
					<div class="friend_face1">
						<div class="left"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/face/face2.jpg" class="face"></div>
						<div class="left friend_infor">
							<div class="name">鬼鬼</div><br/>
							<input type="button" value="+&nbsp;好友" class="button_" title="加TA为好友" onmouseover="this.style.backgroundColor='#AFEEEE'" onmouseout="this.style.backgroundColor='#B0E0E6'">
						</div>
					</div>
					<div class="friend_face1">
						<div class="left"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/face/face3.jpg" class="face"></div>
						<div class="left friend_infor">
							<div class="name">久久</div><br/>
							<input type="button" value="+&nbsp;好友" class="button_" title="加TA为好友" onmouseover="this.style.backgroundColor='#AFEEEE'" onmouseout="this.style.backgroundColor='#B0E0E6'">
						</div>
					</div>
					<div class="friend_face1">
						<div class="left"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/face/face4.jpg" class="face"></div>
						<div class="left friend_infor">
							<div class="name">Super</div><br/>
							<input type="button" value="+&nbsp;好友" class="button_" title="加TA为好友" onmouseover="this.style.backgroundColor='#AFEEEE'" onmouseout="this.style.backgroundColor='#B0E0E6'">
						</div>
					</div>
					<div class="friend_face2">
						<div class="left"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/face/face5.jpg" class="face"></div>
						<div class="left friend_infor">
							<div class="name">酒xian</div><br/>
							<input type="button" value="+&nbsp;好友" class="button_" title="加TA为好友" onmouseover="this.style.backgroundColor='#AFEEEE'" onmouseout="this.style.backgroundColor='#B0E0E6'">
						</div>
					</div>
					<div class="friend_face2">
						<div class="left"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/face/face6.jpg" class="face"></div>
						<div class="left friend_infor">
							<div class="name">酒M</div><br/>
							<input type="button" value="+&nbsp;好友" class="button_" title="加TA为好友" onmouseover="this.style.backgroundColor='#AFEEEE'" onmouseout="this.style.backgroundColor='#B0E0E6'">
						</div>
					</div>
					<div class="friend_face2">
						<div class="left"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/face/face1.jpg" class="face"></div>
						<div class="left friend_infor">
							<div class="name">剑圣</div><br/>
							<input type="button" value="+&nbsp;好友" class="button_" title="加TA为好友" onmouseover="this.style.backgroundColor='#AFEEEE'" onmouseout="this.style.backgroundColor='#B0E0E6'">
						</div>
					</div>
					<div class="friend_face2">
						<div class="left"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/face/face.jpg" class="face"></div>
						<div class="left friend_infor">
							<div class="name">德玛</div><br/>
							<input type="button" value="+&nbsp;好友" class="button_" title="加TA为好友" onmouseover="this.style.backgroundColor='#AFEEEE'" onmouseout="this.style.backgroundColor='#B0E0E6'">
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="last-area"></div>
	</center>
</body>
</html>